<!DOCTYPE html>
<html lang="en">

<head>
    <title>car</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="" />
    <link rel="stylesheet" href="css/bootstrap.css">
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
    <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css"><!-- 图标样式 -->
    <link rel="stylesheet" type="text/css" href="./css/home.css">
    <link href="css/owl.carousel.css" rel="stylesheet" type="text/css" media="all">
    <link rel="stylesheet" type="text/css" href="./css/car.css">

    <script src="js/jquery-2.2.3.min.js"></script>
    <script src="js/jquery-scrolltofixed-min.js" type="text/javascript"></script><!-- 导航栏 -->
    <script src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/move-top.js"></script>
    <script type="text/javascript" src="js/easing.js"></script>
    <script src="js/jquery.menu-aim.js"></script>
    <script src="js/custom.js"></script>
    <script src="js/main.js"></script><!-- 导航栏 -->
    <script src="js/del.js"></script>
</head>

<body>
    <div class="header" id="header"></div>
    <div id="app">
        <!-- products -->
        <div class="products">
            <div class="container">
                <div class="col-md-12 product-w3ls-right">
                    <!-- breadcrumbs -->
                    <ol class="breadcrumb breadcrumb1">
                        <li><a href="home.html">Home</a></li>
                        <li class="active">购物车</li>
                    </ol>
                    <div class="clearfix"> </div>
                    <!-- //breadcrumbs -->

                    <div class="shopping-car-container">
                        <div class="car-headers-menu">
                            <div class="row">
                                <div class="col-md-3 col-sm-2 col-xs-2 car-menu">商品信息</div>
                                <div class="col-md-3 col-sm-2 col-xs-2 car-menu">商品类型</div>
                                <div class="col-md-1 col-sm-2 col-xs-2 car-menu">单价</div>
                                <div class="col-md-2 col-sm-2 col-xs-2 car-menu">数量</div>
                                <div class="col-md-1 col-sm-2 col-xs-2 car-menu">金额</div>
                                <div class="col-md-2 col-sm-2 col-xs-2 car-menu">操作</div>
                            </div>
                        </div>
                        <div class="goods-content">
                            <div class="goods-item" v-for="(g,i) in cart">
                                <div class="panel panel-default">
                                    <div class="panel-body">
                                        <div class="col-md-3 col-sm-2 col-xs-2 car-goods-info goods-image-column">
                                            <a href="goodsDetail.html" @click="toGoodsDetail(g.id)">
                                                <img class="goods-image" :src="g.goodsImage" />
                                            </a>
                                        </div>
                                        <div class="col-md-3 col-sm-2 col-xs-2 car-goods-info goods-params">
                                            <p class="goods-info">
                                                {{g.gType}}
                                            </p>
                                        </div>
                                        <div class="col-md-1 col-sm-2 col-xs-2 car-goods-info goods-price">
                                            <span class="goods-price single-price">￥{{g.price}}</span></div>
                                        <div class="col-md-2 col-sm-2 col-xs-2 car-goods-info goods-counts">
                                            <div class="input-group">
                                                <div class="input-group-btn">
                                                    <button type="button"
                                                        class="goods-sub btn btn-default car-decrease" @click="changCount(i,-1)">-</button>
                                                </div>
                                                <input type="text" :id="`goods_count_` + i" disabled class="goods-num form-control goods-count" v-model="g.count">
                                                <div class="input-group-btn">
                                                    <button type="button" class="goods-add btn btn-default car-add" @click="changCount(i,1)">+</button>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-1 col-sm-2 col-xs-2 car-goods-info goods-money-count">
                                            <span class="goods-totalMoney single-total">￥{{g.count * g.price}}</span></div>
                                        <div class="col-md-2 col-sm-2 col-xs-2 car-goods-info goods-operate">
                                            <a class="btn btn-primary" @click="settle(g)">结算</a>
                                            <a data-toggle="modal" data-target=".bs-example-modal-sm" href="#"
                                                class="btn btn-danger" @click="deleteGoods(g)">删除</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="goods-btns text-right">
                                <input disabled class="btn btn-default goodsList-totalMoney" v-model="v_totalPrice">
                                <a class="btn btn-primary" @click="settleAll">全部结算</a>
                            </div>
                        </div>
                    </div>
                    <!-- //add-products -->
                </div>
                <div class="clearfix"> </div>
            </div>
        </div>
        <!--//products-->

        <!--最热商品-->
        <div class="add-products">
            <h3 class="w3ls-title">热卖商品</h3>
            <div class="container">
                <div class="add-products-row">
                    <div class=" w3ls-add-grids" v-for="g in hot">
                        <a href="goodsDetail.html" @click="toGoodsDetail(g.id)">
                            <img :src="g.commoditUrl">
                            <p>{{g.title}}<span>${{g.price}}</span></p>
                            <span>Shop now <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="copy-right" id="foot"></div>
</body>
<script type="text/javascript" src="js/jquery-cookie-1.4.1.js"></script>
<script type="text/javascript" src="js/vue-2.6.11.js"></script>
<script type="text/javascript" src="js/axios-0.19.2.min.js"></script>
<script type="text/javascript" src="js/layer.js"></script>
<script type="text/css" src="js/mobile/need/layer.css"></script>
<script type="text/javascript" src="js/cart/cart.js"></script>
</html>
<script>
    $(function(){
        $("#header").load("/header");
        $("#foot").load("/foot");
    });
</script>